<template>
  <div id="role">
    <div style="padding: 5px 0">
      <el-button type="primary" plain @click="dialogFormVisible = true">新增角色</el-button>
    </div>
    <!-- 角色管理 -->
    <!-- default-expand-all -->
    <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border
      :tree-props="{ children: 'permissionList' }" stripe>
      <el-table-column prop="id" label="编号" sortable />
      <el-table-column prop="ref" label="标识" sortable />
      <el-table-column prop="name" label="角色名称" sortable />
      <el-table-column prop="des" label="对应权限" sortable />
      <!-- 删除 -->
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <!-- <el-button type="danger" size="small" @click="removeRole(row.id)">删除</el-button> -->
          <el-popconfirm title="确定删除吗？" @confirm="removeRole(row.id)">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 弹窗 -->
  <el-dialog title="新增角色" v-model="dialogFormVisible">
    <el-form :model="form" label-width="80px">
      <el-form-item label="角色名称">
        <el-input v-model="form.name" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.des" placeholder="请输入描述"></el-input>
      </el-form-item>
      <el-form-item label="标识">
        <el-input v-model="form.ref" placeholder="请输入标识"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-checkbox-group v-model="form.permissionList">
          <el-checkbox v-for="item in allPermissions" :key="item.id" :label="item.id">{{ item.des }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addRoleAndPermissionDo">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue";
import { getAllRole, getUserDepartment, getUserPermission, addRoleAndPermission, removeRole, searchAllPermissions } from "../../network/net.js";
let token = sessionStorage.getItem("token");
const tableData = ref([]);
let uid = localStorage.getItem("loginId");
let uobj = { id: uid };
getUserDepartment(token, uobj).then((response1) => {
  getAllRole(token).then((res) => {
    if (res?.data?.code == "200" && res?.data?.data?.records?.length > 0) {

      if (response1.data.data.role.name == "超级管理员") {
        let arr = res?.data?.data?.records;
        arr.sort((a, b) => {
          return a.id - b.id;
        });
        arr.map((item) => {
          item.id = "role-" + item.id;
          return item;
        });
        // 根据id排序
        arr.sort((a, b) => {
          return a.id - b.id;
        });
        tableData.value = res?.data?.data?.records;
        

      } else {
        let arr = res?.data?.data?.records;
        let arr2 = [];
        arr.sort((a, b) => {
          return a.id - b.id;
        });
        arr.map((item) => {
          item.id = "role-" + item.id;
          return item;
        });

        arr.forEach((element) => {
          if (element.name != "超级管理员") {
            arr2.push(element);
          }
        });
        tableData.value = arr2;
      }
    }
  });
});

let dialogFormVisible = ref(false);
let form = reactive({
  name: "",
  des: "",
  ref: "",
  permissionList: [],
});

const roleTrue = ['comprehensive','tidal','numerical','disaster','typhoon','system']
let allPermissions = ref([]);
const searchAllPermissionsDo = () => {
  allPermissions.value = [];
  searchAllPermissions(token).then((res) => {
    if (res?.data?.code == "200" && res?.data?.data?.length > 0) {
      allPermissions.value = res?.data?.data;
      allPermissions.value = allPermissions.value.filter((item) => {
        return roleTrue.includes(item.ref);
      });
    }
  });
};
searchAllPermissionsDo();

const addRoleAndPermissionDo = () => {
  let obj = {
    name: form.name,
    des: form.des,
    ref: form.ref,
    permissionList: form.permissionList,
  };
  addRoleAndPermission(token, obj).then((res) => {
    if (res?.data?.code == "200") {
      dialogFormVisible.value = false;
      searchAllPermissionsDo();
    }
  });
};
</script>
<style lang="less" scoped>
#role {
  padding: 5px;
}
</style>
